<template>
    <div class="login-page">
        <div class="left">
            <img src="http://pinda.itheima.net/static/img/background.902e6b43.png" alt="">
        </div>
        <div class="right">
            <div class="right-main">
                <div class="top-img">
                    <img src="http://pinda.itheima.net/static/img/logo1.2459363d.png" alt="">
                </div>
                <el-form style="width: 100%;" ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm"
                    :size="formSize" status-icon>
                    <el-form-item prop="account">
                        <el-input style="width:100%;height: 55px;font-size: 18px;" v-model="ruleForm.account" clearable
                            :prefix-icon="User" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" style="width:100%;height: 55px;font-size: 18px;"
                            v-model="ruleForm.password" clearable :prefix-icon="Key" />
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input style="width:60%;height:55px;font-size: 18px;" v-model="ruleForm.code" clearable
                            :prefix-icon="Lock" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                            style="border: 0; background: linear-gradient(#D92E2C, #F86D2B); font-size: 18px; margin-top: 30px;width: 100%;height:50px;"
                            @click="onSubmit(ruleFormRef)">
                            立即登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// import "./index.scss"
import { ref, reactive } from 'vue'
import { Lock, User, Key } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
let ruleForm = reactive({
    account: '',
    password: '',
    code: ''
})
const router = useRouter()
const formSize = ref('default')
const ruleFormRef = ref()
const rules = reactive({
    account: [
        { required: true, message: '不可以为空', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '不可以为空', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '不可以为空', trigger: 'blur' }
    ],
})
const onSubmit = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('submit!')
            router.push('/home')
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style lang="scss" scoped>
.login-page {
    width: 100%;
    height: 100%;
    display: flex;

    .left {
        width: 65%;
        height: 99.5%;

        // background: url(http://pinda.itheima.net/static/img/background.902e6b43.png) no-repeat;
        img {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
        }
    }

    .right {
        height: 100%;
        width: 30%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;

        .right-main {
            width: 100%;
            text-align: center;

            img {
                margin-bottom: 50px;
            }
        }
    }
}
</style>